<template>
  <zm-view ref="view">
    <image class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/mall-header-bg.png')" mode="scaleToFill" />
    <zm-navbar :border-bottom="false" background="transparent" :title="orderInfo.orderStatusName">
      <template slot="right">
        <zm-icon v-if="isShowDelete" name="delete-o" size="36rpx" @click="handleDelete"></zm-icon>
      </template>
    </zm-navbar>
    <view class="content-wrap">
      <!-- 待支付 -->
      <view v-if="orderInfo.orderStatus == 0" class="flex flex-1 flex-col items-center">
        <view class="flex font-26 text-center py-34">
          <text>请尽快完成付款，还剩</text>
          <u-count-down :time="orderInfo.autoTime * 1000" auto-start format="mm分ss秒" @finish="handleGetInfo"></u-count-down>
        </view>
        <view class="flex justify-between w-full mb-36 px-60">
          <zm-button round block plain type="default" color="transparent" border-color="#333333" height="62rpx" font-size="26rpx" @click="handleCancelOrder">取消订单</zm-button>
          <zm-button round block type="default" height="62rpx" font-size="26rpx" custom-class="ml-36" @click="handlePay">立即付款</zm-button>
        </view>
      </view>
      <view v-if="orderInfo.orderStatus == 3" class="text-center font-26 py-34">订单超时，已自动关闭</view>
      <view v-if="orderInfo.orderStatus == 4" class="text-center font-26 py-34">{{ orderInfo.type == 1 ? "会员" : cardName }}账户充值成功</view>
      <view v-if="orderInfo.orderStatus == 5" class="text-center font-26 py-34">系统正在为您自动退款，预计1-3个工作日原路退回</view>

      <view v-if="orderInfo.orderStatus == 4" class="success-card flex flex-col items-center justify-center p-24 bg-white radius-16">
        <text class="text-price-mini-before font-48 font-bold">{{ orderInfo.rechargeMoney | formatDigit({ trimZero: false }) }}</text>
        <view class="flex items-center mt-12">
          <text>{{ orderInfo.type == 1 ? "余额" : cardName }}剩余金额</text>
          <text v-if="orderInfo.type == 1" class="text-price text-price-before ml-4">{{ orderInfo.balance | formatDigit }}</text>
          <text v-else class="text-price text-price-before ml-4">{{ orderInfo.point | formatDigit }}</text>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="p-24 bg-white radius-16 mt-20">
        <view class="flex font-26 mt-20">
          <text class="text-666">充值金额：</text>
          <text class="text-price-before ml-10">{{ orderInfo.rechargeMoney | formatDigit({ trimZero: false }) }}</text>
        </view>
        <view v-if="orderInfo.orderStatus == 4 || orderInfo.orderStatus == 5" class="flex font-26 mt-20">
          <text class="text-666">实付金额：</text>
          <text class="text-price-before ml-10">{{ orderInfo.payMoney | formatDigit({ trimZero: false }) }}</text>
        </view>
        <view class="flex font-26 mt-20 items-center">
          <text class="text-666">订单号码：</text>
          <text class="ml-10">{{ orderInfo.orderNo }}</text>
          <view class="copy-btn" @click="useCopy(orderInfo.orderNo)">复制</view>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">订单时间：</text>
          <text class="ml-10">{{ orderInfo.createTime }}</text>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">充值账户：</text>
          <text class="ml-10">{{ orderInfo.tAccount }}</text>
        </view>
      </view>
    </view>
    <!-- 支付组件 -->
    <pay-way-popup ref="pay"></pay-way-popup>
    <zm-popup :show.sync="showDetalPopup" mode="bottom" height="500rpx" max-height="500rpx" border-radius="16rpx" closeable safe-area-inset-bottom>
      <view slot="header" class="flex justify-center p-24 font-32">金额明细</view>
      <view class="p-24">
        <view v-for="(item, index) in orderInfo.otherPayInfo" :key="index" class="flex items-center justify-between font-26">
          <text class="text-666">{{ item.name }}</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
      <view slot="footer" class="p-24">
        <zm-button size="medium" round @click="showDetalPopup = false">确定</zm-button>
      </view>
    </zm-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      orderId: "",
      orderType: "",
      orderInfo: {},
      showDetalPopup: false
    }
  },
  computed: {
    ...mapGetters(["cardName"]),
    isShowDelete() {
      const status = ["4", "5"]
      return !status.includes(this.orderInfo.orderStatus)
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.orderType = options.orderType
  },
  onShow() {
    this.handleGetInfo()
  },
  methods: {
    handleDelete() {
      uni.$dialog({
        title: "提示",
        content: "确定删除该订单吗?",
        asyncClose: true,
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonText: "确定删除",
        onConfirm: ({ close, done }) => {
          uni.$api.balance
            .delRechargeOrder({ orderId: this.orderInfo.orderId, type: this.orderInfo.type })
            .then(() => {
              close()
              uni.navigateBack()
            })
            .catch(() => {
              done()
            })
        },
        onCancel: ({ close }) => {
          close()
        }
      })
    },
    handleCancelOrder() {
      uni.$dialog({
        title: "提示",
        content: "确定取消订单吗?",
        asyncClose: true,
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonText: "确定",
        onConfirm: ({ close, done }) => {
          const apis = { 1: uni.$api.balance.cancelOrder, 2: uni.$api.card.cancelOrder }
          apis[this.orderType]({ orderId: this.orderId })
            .then(() => {
              this.handleGetInfo()
              close()
            })
            .catch((res) => {
              res.status == "32806" ? close() : this.handleGetInfo()
              done()
            })
        },
        onCancel: ({ close }) => {
          close()
        }
      })
    },
    handleGetInfo() {
      uni.$api.balance.getRechargeOrderInfo({ orderId: this.orderId, type: this.orderType }).then((res) => {
        this.orderInfo = res
        uni.setNavigationBarTitle({ title: this.orderInfo.orderStatusName })
      })
    },
    handlePay() {
      this.$refs.pay.open({
        isContinuePay: true,
        orderId: this.orderInfo.orderId,
        orderType: this.orderType == 1 ? "accoutRecharge" : "cardRecharge",
        preInfo: {
          needPay: this.orderInfo.payMoney
        },
        success: () => {
          uni.navigateBack()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 436rpx;
  position: fixed;
}

.content-wrap {
  padding: 24rpx;
  padding-top: 0;
  position: relative;
  .success-card {
    box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(208, 208, 208, 0.16);
  }
  .copy-btn {
    width: 56rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    justify-content: center;
    border: 2rpx solid #cccccc;
    font-size: 22rpx;
    color: #999999;
    margin-left: 14rpx;
  }
}
</style>
